import icons from "./icon.js"
export const toolItems = [{
  iconClass: 'fa fa-table',
  title: '表', // 显示名称
  width: 250, // 默认宽度
  height: 100, // 默认高度
  dropAble: false, // 是否可以作为drop的对象
  style: { // 样式
    html: '1',
    fillColor: 'none',
    strokeColor: 'none',
    fontColor: 'none',
    labelBackgroundColor: 'none',
    overflow: 'fill'
  },
  created(graph, cell, index) {
    const deleteIconDom = document.querySelector(`.deleteIcon_${index}`)
    if (deleteIconDom) {
      deleteIconDom.addEventListener('click', () => {
        graph.removeCells([cell])
      })
    }
  },
  /* <div style="margin: 0; padding: 0 5px; height: 100%; display: flex; justify-content: space-between; align-items: center;">
   <span style="font-size: 1.2rem; color: cornsilk; font-weight: 600;">子元素</span>
   <img style="height: 20px; width: 20px; cursor: pointer;" class="deleteIcon_${index}" src="" alt=""/>
  </div> */
  html: (index) =>
    `
     <div class="table">
       <div class="table-info">
         <div class='title'>表名</div>
         <div class='items'>
           <div class="item">
             <div style="width: 1rem;">
               <i class="fa fa-key" aria-hidden="true" style="color: #e67e22;margin-right: 5px;font-size: 0.6rem;"></i>
             </div>
             <div class="text" style="color: #e67e22;">主键/id</div>
           </div>
         </div>
       </div>
     </div>
     `
    .replace(/[\r\n]/g, '')
}, {
  iconClass: 'fa fa-sticky-note',
  title: '笔记',
  width: 200,
  height: 100,
  dropAble: true,
  style: {
    html: '1',
    fillColor: 'none',
    strokeColor: 'none',
    fontColor: 'none',
    labelBackgroundColor: 'none',
    overflow: 'fill'
  },
  created(graph, cell, index) {
    const deleteIconDom = document.querySelector(`.deleteIcon_${index}`)

    if (deleteIconDom) {
      deleteIconDom.addEventListener('click', () => {
        graph.removeCells([cell])
      })
    }
  },
  html: (index) =>
    `
      <div class="note">
      </div>
          `
    .replace(/[\r\n]/g, '')
}]
